<template>
    <div class="qilin-InnovateDialog">
        <el-dialog :visible.sync="ownDialogConfig.isShow" :title="ownDialogConfig.title" width="600px" center
            append-to-body :before-close="handleClose" :close-on-click-modal="false" :close-on-press-escape="false">
            <el-form ref="formData" :model="formData" :rules="formRule" size="mini" label-width="100px"
                label-position="right" label-suffix=":" class="upload-form">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="部门" prop="employeeDepartment">
                            <el-select placeholder="请选择" v-model="formData.employeeDepartment" clearable
                                @change="changeEmployeeDepartment" :disabled="!!formData.certificationId">
                                <el-option v-for="item in employeeDepartmentList" :key="item.id" :label="item.label"
                                    :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="姓名" prop="employeeName">
                            <el-select placeholder="请选择姓名" v-model="formData.employeeName" clearable filterable
                                :disabled="!!formData.certificationId" @change="changeEmployee">
                                <el-option v-for="item in employeeNameList" :key="item.id"
                                    :label="`${item.label}(${item.code})`" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="成果名称" prop="achievementName">
                            <el-input type="text" placeholder="请输入" v-model="formData.achievementName" clearable>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="成果类别" prop="achievementCategory">
                            <el-input type="text" placeholder="请输入" v-model="formData.achievementCategory" clearable>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="奖项类别" prop="awardsRank">
                            <el-select placeholder="请选择" v-model="formData.awardsRank">
                                <el-option v-for="item in qualificationsScoreList" :key="item.value" :label="item.label"
                                    :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="积分" prop="innovateIntegral">
                            <el-input type="text" placeholder="请输入" v-model="formData.innovateIntegral" clearable
                                :disabled="!!formData.certificationId">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="备注" prop="remark">
                            <el-input type="textarea" v-model="formData.remark" :rows="3" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>

                </el-row>
            </el-form>
            <div slot="footer">
                <el-button type="default" size="mini" @click="handleClose">取消</el-button>
                <el-button type="primary" size="mini" @click="submitData('formData')">确认</el-button>
            </div>
        </el-dialog>
        <el-dialog :visible.sync="dialogImage.isShow" title="" :append-to-body="true" center>
            <img width="100%" height="400px" :src="dialogImage.imgSrc" alt="">
            <div class="Qilin-image-pagination">
                <i class="el-icon-caret-left" @click="prev()"></i>
                <div class="Qilin-image-pagination-page">
                    <span>{{dialogImage.currentIndex}}</span>
                    <span>/</span>
                    <span>{{dialogImage.total}}</span>
                </div>
                <i class="el-icon-caret-right" @click="next()"></i>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { innovateData, getEmployeeData } from "@/api/index.js";
export default {
    data() {
        return {
            ownDialogConfig: { //弹窗自身的配置
                isShow: false,
                title: "新增"
            },
            formData: { // 弹窗内表单配置
                employeeId: "",
                employeeCode: "",
                employeeName: "",
                employeeDepartment: "",
                achievementName: "",
                achievementCategory: "",
                // year: "",
                innovateIntegral: "",
                awardsRank: "",
                // files: "",
                remark: "",
                certificationId: ""
            },
            formRule: { //弹窗内表单校验规则配置
                employeeDepartment: [
                    {
                        required: true,
                        message: "请选择部门",
                        trigger: "change"
                    }
                ],
                employeeName: [
                    {
                        required: true,
                        message: "请选择姓名",
                        trigger: "change"
                    }
                ],
                achievementName: [
                    {
                        required: true,
                        message: "请输入成果名称",
                        trigger: "blur"
                    }
                ],
                achievementCategory: [
                    {
                        required: true,
                        message: "请输入成果类别",
                        trigger: "blur"
                    }
                ],
                innovateIntegral: [
                    {
                        required: true,
                        message: "请输入积分",
                        trigger: "blur"
                    }
                ],
                awardsRank: [
                    {
                        required: true,
                        message: "请选择奖项类别",
                        trigger: "change"
                    }
                ]
            },
            // qualificationsLevelList: [ //资质等级下拉数据集
            //     {
            //         label: "A",
            //         value: "A",
            //         id: 1
            //     },
            //     {
            //         label: "B",
            //         value: "B",
            //         id: 2
            //     },
            //     {
            //         label: "C",
            //         value: "C",
            //         id: 3
            //     },
            //     {
            //         label: "D",
            //         value: "D",
            //         id: 4
            //     }
            // ],
            qualificationsScoreList: [ //奖项级别下拉数据集
                {
                    label: "一等奖",
                    value: "一等奖",
                    id: 1
                },
                {
                    label: "二等奖",
                    value: "二等奖",
                    id: 2
                },
                {
                    label: "三等奖",
                    value: "三等奖",
                    id: 3
                }
            ],
            dialogImage: { // 选中上传图片后的图片查看弹窗
                isShow: false,
                imgSrc: "",
                currentIndex: 1,
                total: 1
            },
            num: 0,
            employeeDepartmentList: [ // 部门下拉选择数据集
                {
                    label: "综合部",
                    value: "综合部",
                    id: 1
                },
                {
                    label: "财务部",
                    value: "财务部",
                    id: 2
                },
                {
                    label: "市场拓展部",
                    value: "市场拓展部",
                    id: 3
                },
                {
                    label: "系统集成部",
                    value: "系统集成部",
                    id: 4
                },
                {
                    label: "工程部",
                    value: "工程部",
                    id: 5
                },
                {
                    label: "产品研发部",
                    value: "产品研发部",
                    id: 6
                },
                {
                    label: "平台运维部",
                    value: "平台运维部",
                    id: 7
                }
            ],
            employeeNameList: [] //姓名下拉选择数据集
        }
    },
    methods: {
        // 修改时事件监听
        initUpdate(data) {
            if (!data) { // 新增时进入
                this.ownDialogConfig.title = "新增";
            } else { //编辑时进入
                this.$nextTick(() => {
                    if (this.ownDialogConfig.title == "编辑") {
                        this.formData.certificationId = true
                    }
                })
                this.ownDialogConfig.title = "编辑";
                this.formData = { ...data };
                this.getEmployeeData(this.formData.employeeDepartment);
            }
            this.ownDialogConfig.isShow = true;
        },
        // 初始化获取所在部门下人员信息事件监听
        getEmployeeData(departmentName) {
            getEmployeeData({ employeeDepartment: departmentName }).then((res) => {
                if (res.code === 200) {
                    this.employeeNameList = res.result.map((item) => {
                        return {
                            id: item.employeeId,
                            label: item.employeeName,
                            value: item.employeeId,
                            code: item.employeeCode
                        }
                    });
                }
            });
        },
        // 当选择部门事件监听
        changeEmployeeDepartment(value) {
            this.formData.employeeName = "";
            this.$nextTick(() => {
                this.$refs["formData"].clearValidate("employeeName");
            });
            if (!value) {
                this.employeeNameList = [];
            } else {
                this.getEmployeeData(value);
            }
        },
        // 选择员工事件监听
        changeEmployee(value) {
            this.formData.employeeId = "";
            this.$nextTick(() => {
                this.$refs["formData"].clearValidate("employeeId");
                this.formData.employeeId = value;
            });
        },

        // 点击确认按钮事件监听
        submitData(refName) {
            this.$refs[refName].validate((valid) => {
                if (valid) {
                    if (!this.formData.certificationId) { //新增时进入
                        innovateData(this.formData).then((res) => {
                            if (res.code === 200) {
                                this.$message({
                                    message: "新增成功",
                                    type: "success"
                                });
                                this.$emit("refresh");
                                this.handleClose();
                            } else {
                                this.$message({
                                    message: res.message || "请求错误",
                                    type: "error"
                                });
                            }
                        });
                    } else { // 编辑时进入
                        innovateData(this.formData).then((res) => {
                            if (res.code === 200) {
                                this.$message({
                                    message: "编辑成功",
                                    type: "success"
                                });
                                this.$emit("refresh");
                                this.handleClose();
                            } else {
                                this.$message({
                                    message: res.message || "请求错误",
                                    type: "error"
                                });
                            }
                        });
                    }
                }
            });
        },
        // 关闭弹窗事件监听
        handleClose() {
            this.fileList = [];
            this.employeeNameList = [];
            this.$refs["formData"].resetFields();
            for (let key in this.formData) {
                this.formData[key] = "";
            }
            this.ownDialogConfig.isShow = false;
        }
    },
    mounted() {

    }
}
</script>
<style lang="scss" scoped>
.Qilin-image-pagination {
    @include flexCenter();
    margin-top: 10px;

    >i {
        font-size: 30px;
        color: $color-text-common;
        cursor: pointer;
    }

    >div.Qilin-image-pagination-page {
        background-color: #eaeaea;
        border-radius: 2px;
        padding: 5px 20px;

        >span {
            margin: 0 1px;

            &:first-child {
                color: $color-text-title;
            }

            &:nth-last-child(-n+2) {
                color: $color-text-common;
            }
        }
    }
}
</style>
